import React, { useState } from 'react';
import { withRouter } from 'react-router-dom';
import './index.css';
import Header from "../../components/Header/Header"
import Footer from "../../components/Footer/Foot"
import {Tabs, Upload, Button, Input, message, Collapse } from 'antd';
import {evidenceCheck, txidCheck} from "@/utils/api";
import {connect} from "react-redux";
import { FormInstance } from 'antd/lib/form';


interface IState {
    path: string,
    isShow: boolean,
    t_id:string,
    lineItem: {
        number: string,
        currentBlockHash:string,
        previousBlockHash:string,
        transactions: any,
        timestamp: number
    },
    verification: number
}

interface IProps {
    match:any
}

class JoinUs extends React.Component<IProps, IState> {
    formRef:any = React.createRef<FormInstance>();
    constructor(props: any) {
        super(props);
        this.state = {
            path: "",
            isShow: false,
            t_id:'',
            lineItem: {
                number: "",
                currentBlockHash:"",
                previousBlockHash:"",
                transactions: [],
                timestamp: 0
            },
            verification:1
        }

        sessionStorage.setItem("path", this.props.match.path)

    }


    evidenceCheck = () => {
        evidenceCheck(
            {
                "file_path": this.state.path
            }
        )
            .then((res: any) => {
                if(res.data.code == 0) {
                    message.success("查询成功")

                }else {
                    message.error(res.data.msg)
                    this.setState({
                        isShow: true
                    })
                }
            })
            .catch((error: any) => {
                message.error(error);
            })
    }

    jsonTop = (e:any) => {
        let index=e.lastIndexOf("value=");
        e=e.substring(index+6);
        console.log(e)
        return JSON.parse(e)
    }

    txidCheck = () => {
        txidCheck(this.state.t_id
        )
            .then((res: any) => {
                console.log(res.data.code)
                if(res.data.code == 0) {
                    message.success("查询成功")
                    this.setState({
                        lineItem: res.data.data
                    })

                }else {
                    // message.error(res.data.msg)
                    this.setState({
                        isShow: true
                    })
                }
            })
            .catch((error: any) => {
                message.error(error);
            })
    }

    inputChange = (e:any) =>{
        this.setState({
            t_id:e.target.value
        })
    }
    getYMDHMS (timestamp: any) {
        let time:any = new Date(timestamp*1000)
        return time.toLocaleDateString().replace(/\//g, "-") + " " + time.toTimeString().substr(0, 8)
    }
    callback = () => {
        this.setState({
            isShow: false,
            lineItem: {
                number: "",
                currentBlockHash:"",
                previousBlockHash:"",
                transactions: [],
                timestamp: 0
            }
        })
    }

    onChange = (info:any) => {
        if (info.file.status !== 'uploading') {

            this.setState({
                path: info.file.response.data
            })
            console.log(this.state.path)
        }
        if (info.file.status === 'done') {
            message.success(`${info.file.name}上传成功`);
        } else if (info.file.status === 'error') {
            message.error(`${info.file.name} 上传失败`);
        }
    }

    render () {
        const {  path , isShow, lineItem, verification} = this.state;
        return (

            <div>
                <div className="boxJoin">
                    <Header></Header>
                    <div className="join">
                        <img src={require("../../assets/img/img1.png")} alt="" className="img1" />
                            <div className="bgcCc"></div>
                            <div className="join_auto">
                                <img src={require("../../assets/img/addimg.png")} alt="" className="addimg" />
                                    <div className="join_from">
                                        <div className="text">请您填写单位营业执照，单位名称，联系方式等，获得节点上 2/3 节点的投票通过 即可加入我们</div>
                                        <div className="input">
                                            <img src={require("../../assets/img/FImg1.png")} alt="" className="inputImg" />
                                                <span>单位名称：</span>
                                                <input type="text" name="" id="" placeholder="请填写单位名称" />
                                        </div>
                                        <div className="input">
                                            <img src={require("../../assets/img/FImg2.png")} alt="" className="inputImg" />
                                                <span>营业执照：</span>
                                                <input type="text" name="" id="" placeholder="请上传营业执照" />
                                                    <span className="upload">上传</span>
                                        </div>
                                        <div className="input">
                                            <img src={require("../../assets/img/FImg3.png")} alt="" className="inputImg inputImg3" />
                                                <span>联系人：</span>
                                                <input type="text" name="" id="" placeholder="请填写联系人" />
                                        </div>
                                        <div className="input">
                                            <img src={require("../../assets/img/FImg4.png")} alt="" className="inputImg" />
                                                <span>联系方式：</span>
                                                <input type="text" name="" id="" placeholder="请填写联系方式" />
                                        </div>
                                        <div className="add">确认</div>
                                    </div>
                                    <div className="nava">
                                        <div className="h4"><span className="span"></span><span
                                            className="text">链/上/成/员</span></div>
                                        <div className="ul">
                                            <div className="li">
                                                <img src={require("../../assets/img/ulImg1.png")} alt="" />
                                                    <div>中国科学院道德委员会</div>
                                            </div>
                                            <div className="li">
                                                <img src={require("../../assets/img/ulImg2.png")} alt="" />
                                                    <div>中国科学院心理研究所</div>
                                            </div>
                                            <div className="li">
                                                <img src={require("../../assets/img/ulImg3.png")} alt="" />
                                                    <div>中国科学院文献情报中心</div>
                                            </div>
                                            <div className="li">
                                                <img src={require("../../assets/img/ulImg4.png")} alt="" />
                                                    <div>中国科学院软件研究所</div>
                                            </div>
                                        </div>
                                    </div>
                            </div>
                    </div>
                    <Footer></Footer>
                </div>
            </div>

        )
    }
}


export default withRouter(connect((state: any) => state.user, {  evidenceCheck, txidCheck })(JoinUs))


